<template>
  <div>
    <h1>使用vuex</h1>
    <div>state数据: {{ c }}</div>
    <div>getters数据: {{ bigC }}</div>
    <button @click="$store.dispatch('add', 9)">+9</button>
    <button @click="$store.commit('jia', 6)">+6</button>
  </div>
</template>

<script>
// mapState 以计算属性的方式,将vuex中的state数据添加到vc实例上
// mapGetters 以计算属性的方式,将vuex中的getters数据添加到vc实例上

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    // mapState和mapGetters传参方式一:
    ...mapState(['c']),
    ...mapGetters(['bigC']),
    // mapState和mapGetters传参方式二:
    // ...mapState({ c: 'c' }),
    // ...mapGetters({ bigC: 'bigC' }),
  },
}
</script>

<style></style>
